import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	WebView,
	DeviceEventEmitter, Image, TouchableOpacity, Modal
} from "react-native";
import { API_REPORT_BASE_URL } from '../../../config/api';
import { style } from '../../../theme/style';
import { GLOBAL } from '../../../config/global';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { Common } from '../../../component/common/Common';

const url = API_REPORT_BASE_URL() + '/sagframe-portal/mobile/report_mobile/result.do?';
const condUrl = API_REPORT_BASE_URL() + '/sagframe-portal/mobile/report_mobile/init.do?';

const scale = GLOBAL.SCALE;
export class ProductPriceDetailPage extends Component {
	constructor(props) {
		super(props);
		//let { goodsId } = props.navigation.state.data;
		this.state = {
			webViewData: '',
			webViewUrl: '',
			_isLoad: false,
			reqData: '',
			cunData: [],
			modalVisible: false,
		}
		this.filters;
		const { params } = this.props.navigation.state;
		this.params = params;
		that = this;
	}

	static navigationOptions = ({ navigation, navigationOptions }) => {
		let { data } = navigation.state.params;
		data.locationCode = '';
		return {
			headerRight: (
				<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginRight: 17 }} >
					<TouchableOpacity activeOpacity={1}
						onPress={() => { that._gotoList(data) }}>
						<Image source={require('../../../imgs/report/filter.png')} />
					</TouchableOpacity>
				</View >
			),
			headerTitle: '价格趋势',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerTintColor: style.color.white,
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				textAlign: 'center',
			}
		}
	}
	_gotoList = (data) => {
		this.setState({
			modalVisible: true
		});
	}



	componentWillMount() {
		/*let { goodsId } = this.params.data.goodsId;
		this.setState({
			webViewUrl: url + '&goodsId=' + goodsId,
		});*/
	}

	componentWillUnmount() {
		DeviceEventEmitter.emit('ChangeUI');
		this.timer && clearTimeout(this.timer);
	}

	handleMessage(e) {
		if (e.nativeEvent.data) {
			this.setState({
				reqData: e.nativeEvent.data,
				modalVisible: false
			});
		}
	}

	_loadError(e) {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status='error' errorText={e} onErrorPress={() => this._setUrl()} />
			</View>
		)
	}



	render() {
		console.log('this.params:', this.params);
		const { reqData, modalVisible } = this.state;
		let webViewUrlShow = reqData ? (condUrl + reqData + '&goodsId=' + this.params.data.goodsId) : (condUrl + 'rptDeployVO.rptId=RPT_MOBILE_1003&goodsId=' + this.params.data.goodsId);//'http://39.106.234.139/sagframe-portal/mobile/report_mobile/init.do?rptDeployVO.rptId=RPT_MOBILE_1003&goodsId=' + this.params.data.goodsId;
		let showUrl = reqData ? (url + reqData + '&goodsId=' + this.params.data.goodsId) : (url + 'rptDeployVO.rptId=RPT_MOBILE_1003&goodsId=' + this.params.data.goodsId);
		return (
			<View style={styles.container}>
				<WebView
					ref={'webview'}
					source={{
						uri: showUrl,
						headers: {
							'Accept': 'application/json',
							'Content-Type': 'application/json',
							"authToken": GLOBAL.TOKEN,
						}
					}}
					style={{ width: '100%', height: '100%' }}
					onMessage={(e) => {
						this.handleMessage(e)
					}}
					renderError={(e) => this._loadError(e)}
					onError={(e) => this._loadError(e)}

					startInLoadingState={true}
				/>

				<Modal animationType={"fade"}
					transparent={true}
					onRequestClose={() => { }}
					visible={modalVisible}  >
					<View style={styles.containerModal}>
						<View style={{
							elevation: 0,
							backgroundColor: style.color.themeColor,
							width: 375 * scale,
							height: 60 * scale,
							flexDirection: 'row',
							alignItems: 'center',
						}}>
							<TouchableOpacity style={styles.topTouch} activeOpacity={0.5} onPress={() => { this.setState({ modalVisible: false }) }}>
								<Image source={require('../../../imgs/global/backGray.png')} style={[styles.backIconStyle]} />
							</TouchableOpacity>
							<Text style={{ fontWeight: '900', marginLeft: 40 * scale, color: '#FFFFFF', fontSize: 20 * scale, }}>筛选</Text>
						</View>
						<WebView
							ref={'webview'}
							source={{
								uri: webViewUrlShow,
								headers: {
									'Accept': 'application/json',
									'Content-Type': 'application/json',
									"authToken": GLOBAL.TOKEN,

								}
							}}
							style={{ width: '100%', height: '100%' }}
							onMessage={(e) => {
								this.handleMessage(e)
							}}
							renderError={(e) => this._loadError(e)}
							onError={(e) => this._loadError(e)}
							startInLoadingState={true}
						/>
					</View>
				</Modal>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1
	}, containerModal: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		justifyContent: 'flex-end'
	}, topTouch: {
		width: 40 * scale,
	},
	backIconStyle: {
		width: 20 * scale,
		resizeMode: 'contain',
		marginLeft: 10 * scale,
		tintColor: '#fff',
	}
})